		html,body,div{
			margin: 0;
			padding: 0;
		}
		.slider-outer{/*这里是整体框架大小*/
			width: 100%;
			height: 500px;
			margin: 0 auto;
			overflow-x: hidden;
			overflow-y: hidden;
			background-color: #fff;
			position: relative;
		}
		.img-item{/*图片所占的div*/
			position: absolute;
			width: 20%;
			height: 100%;
			background-color: #fff;
			transition: all 1.5s;
			/*设置子元素在3D空间中呈现*/
			transform-style: preserve-3d;
		}
		/*让图片可以构成一个有四个面的长方体 start*/
		.img{
			width: 100%;
			height: 100%;
			position: absolute;
			background-size: cover;
		}
		.img:nth-child(1){
			background: url(../images/aa.jpg) no-repeat;
			background-size:500% 100%;
			transform: rotateX(0deg) translateZ(150px);/*翻转高度*/
		}
		.img:nth-child(2){
			background: url(../images/bb.jpg) no-repeat;
			background-size:500% 100%;
			transform: rotateX(-90deg) translateZ(150px);
		}
		.img:nth-child(3){
			background: url(../images/cc.jpg) no-repeat;
			background-size:500% 100%;
			transform: rotateX(-180deg) translateZ(150px);
		}
		.img:nth-child(4){
			background: url(../images/dd.jpg) no-repeat;
			background-size:500% 100%;
			transform: rotateX(-270deg) translateZ(150px);
		}
		/*让图片可以构成一个有四个面的长方体 end*/
		.btns{/*方向键位置*/
			position: absolute;
			top: 50%;
			width: 100%;
			height: 70px;
			margin-top: -35px;
		}
		.prev,
		.next{/*方向键大小*/
			width: 70px;
			height: 70px;
			line-height: 70px;
			text-align: center;
			background-color: rgba(0,0,0,.3);
			color: #fff;
			font-size: 30px;
			cursor: pointer;
			position: absolute;
		}
		.prev{
			left: 0;
		}
		.next{
			right: 0;
		}